<template>
  <view class="">
    <scroll-view scroll-y="true">
      <!-- 详情的部分 -->
      <view v-if="detail.mid" class="detail">
        <view class="title">
          {{ detail.title }}
        </view>

        <view class="logo-box">
          <image class="img" :src="Api.userlogo(detail.user.user.id)" mode=""></image>
          <view class="">
            {{
              detail.user.info.nickname 
              || 
              detail.user.user.username 
            }}
          </view>
          <view class="">
            &nbsp;&nbsp;&nbsp;&nbsp;
            {{ Api.formatDate(detail.lastupdate) }}
          </view>


        </view>

        <view class="" v-html="detail.info"></view>

      </view>


      <!-- 评论的部分 -->
      <view class="">
        <view class="p10">
          <button type="primary" @click="showAdd">发表评论</button>
        </view>

        <view class="" v-for="d in list">
          <view class="reply-box">
            <image class="img" :src="Api.userlogo(d.user.user.id)" mode=""></image>

            <view class="">
              <view class="">
                {{ d.user.info.nickname }}
                -
                {{ Api.formatDate(d.lastupdate) }}
              </view>
              <view class="">
                {{ d.info }}
              </view>
            </view>

          </view>
        </view>
      </view>

      <!-- 发布评论的部分 -->
      <uni-popup ref="popup" type="bottom" :mask-click="false">
        <uni-card title="评论">
          <view class="">
            <uni-forms-item>
              <uni-easyinput v-model="addInfo.info" placeholder="" />
            </uni-forms-item>
            <view style="display: flex;">
              <button type="primary" @click="add" size="mini">发布</button>
              <button type="warn" @click="closeAdd" size="mini">关闭</button>
            </view>
          </view>
        </uni-card>
      </uni-popup>

    </scroll-view>
  </view>

</template>

<script setup>
  // 补全加载更多功能
  import {
    ref
  } from 'vue'

  import {
    Api
  } from '../../js/api'

  import {
    onLoad
  } from '@dcloudio/uni-app'

  const id = ref('')

  const popup = ref(null)

  const showAdd = () => {
    popup.value.open('bottom')
  }

  const closeAdd = () => {
    popup.value.close()
  }

  const addInfo = ref({
    "mid": -1,
    "info": ""
  })

  const add = () => {
    addInfo.value.mid = id.value
    Api.post(`/reply`, addInfo.value, (data) => {
      if (data.success) {
        uni.showToast({
          title: '发布成功',
          icon: 'success'
        })
        queryReplies()
        return
      }
      uni.showToast({
        title: data.message,
        icon: 'error'
      })
    })
  }

  onLoad((option) => {
    console.log(option)
    id.value = option.id
    queryDetail()
    queryReplies()
  })

  const detail = ref({})

  const page = ref({
    pageSize: 10,
    pageNumber: 1
  })

  const list = ref([])

  const queryDetail = () => {
    uni.showLoading({
      title: '加载中。。。'
    })
    Api.get(`/message/${id.value}`, {}, (data) => {
      uni.hideLoading()
      if (data.success) {
        detail.value = data.data
        return
      }
      uni.showToast({
        title: data.message,
        icon: 'error'
      })
    })
  }

  const queryReplies = () => {
    Api.get(
      `/message/reply/${id.value}/${page.value.pageSize}/${page.value.pageNumber}/1`, {}, (data) => {
        if (data.success) {
          page.value = data.data.pageBean
          list.value = data.data.list
          return
        }
        uni.showToast({
          title: data.message,
          icon: 'error'
        })
      }
    )
  }
</script>

<style lang="scss">
  .p10 {
    padding: 1rem;
  }

  .detail {
    padding: 1rem;

    p {
      text-indent: 2em;
    }

    .title {
      font-weight: bold;
      text-align: center;
    }

    .logo-box {
      display: flex;
      align-items: center;

      .img {
        display: block;
        width: 2rem;
        height: 2rem;
      }
    }
  }

  .reply-box {
    display: flex;
    align-items: flex-start;

    .img {
      display: block;
      width: 3rem;
      height: 3rem;
    }
  }
</style>